export const domeJavaScriptList = [
    {
        name: "this 指针详解", context: `
<p>this指向无非就这几种情况</p>
<img src='http://180.76.244.163/admin/images/img.png' style="width: 100%;height: 100%;" />
<h1>箭头函数</h1>
<p>本身是没有this,但是它的this指向是包裹第一个的普通函数的this</p>
<h1>bind apply call</h1>
<p>三者可通过方法改变this指向</p>
<p>bind方法,他的this指向是第一次调用的this,和其他两者不一样,例如</p>
<p>let obj = {name:"dog"}</p>
<p>fn.bind(obj)()   //this指向了obj</p> 
`
    },
    {
        name: "闭包的概念及应用场景", context: `
    <h1>什么是闭包</h1>
    <p>有权访问另一个函数作用域内变量的函数都是闭包</p>
    <h1>什么是内存泄漏</h1>
    <p>当内存中产生了不能被回收的变量，就叫内存泄漏</p>
    <h1>为什么还要使用闭包</h1>
    <p>某些情况下，希望某些函数内的变量在函数执行后不被销毁</p>
    <h1>为什么干脆不定义成全局变量呢,现在搞得你还回收不了</h1>
    <p>如果创建全局变量的话，它很容易就会被污染，同名变量，或者被一些函数修改等。为了避免它被篡改，又想让它长时间保存，让他变得形似一个全局变量，可以随时去用，我们就会在这个时候，使用闭包</p>
    <h1>谈一下 你在什么情况下使用闭包</h1>
    <p> 防抖和节流 以及模仿块级作用域,计时器的一个应用</p>
    <p>for (var i = 0; 1 < 10; i++) {<br/>
      (function (j) {<br/>
        setTimeout(function () {<br/>
          console.log(j);<br/>
        }, 1000 * j)<br/>
      })(i)<br/>
    }<br/>
</p>
<h1>埋点计数器</h1>
<p>产品让做的网站分析的一种常用的数据采集方法</p>
<h1>柯里化</h1>
<p>把一个多参数的函数转化成单参数函数的方法</p>
<h1>项目所有的封装都是基于闭包。非要总结的话，模块化是闭包最好的场景，你们说的所有场景，都是在做模块化</h1>
`
    },
    {
        name: "作用域（全局作用域/函数作用域）", context: `
    <h1>什么是作用域</h1>
<p>作用域：还可以装个B，不同角度去解释作用域。如果觉得还不够，还可以说一下作用域分类（全局作用域、函数作用域、块级作用域）。</p>
<p>广义：可访问变量、函数、对象的集合，决定代码区域中变量和其他资源的可见性。</p>
<p>狭义：所有编程语言最基本的功能就是存储变量的的值，并且在之后能够访问和修稿它，这种访问或者修改变量的值得能力给程序带来了“状态”，如果没有状态，程序的灵活性会大大降低，在程序中如何存储变量，已经变量的访问，需要一套设计良好的规则，我们称这套规则为作用域。</p>
<p>块级：javaScript的块级就是{...}大括号内的代码块，我们称之为一个块级。</p>
    `
    },
    {
        name: "默认绑定、显式绑定、隐式绑定", context: `
    <h1>默认绑定</h1>
    <p>this默认绑定我们可以理解为函数调用时无任何调用前缀的情景、默认绑定时this指向全局对象（非严格模式）</p>
    <p></p>
    <p></p>
    <p></p>
    <h1></h1>
    <p></p>
    <p></p>
    <p></p>
    `
    },
    {
        name: "存储空间、执行上下文", context: `
      <h1></h1>
    <p></p>
    `
    },
    {
        name: "JS 面向对象编程", context: `
    <h1>什么是对象</h1>
    <p>首先呢可以理解对象是单个事物的抽象</p>
    <p>或者对象是一个容器，封装了属性（property）和方法（method）</p>
    <p>在实际开发中，对象是一个抽象的概念，可以将其简单理解为：数据集或功能集</p>
    <h1>什么是面向对象</h1>
    <p>面向对象不是新的东西，它只是过程式代码的一种高度封装，目的在于提高代码的开发效率和可维 护性。</p>
    <p>面向对象编程-简称OPP，是一种编程开发思想。 它将真实世界各种复杂的关系，抽象为一个个对象，然后由对象之间的分工与合作，完成对真实世界的模拟。</p>
        <h1>面向对象的特性</h1>
        <p>封装性</p>
        <p>继承性</p>
        <p>[多态性]抽象</p>
       <h1>如何创建对象</h1>
       <p>简单方式:new Object()</p>
       <p>工厂函数</p>
       <p>
function createPerson (name, age) {<br/>
  return {<br/>
    name: name,<br/>
    age: age,<br/>
    sayName: function () {<br/>
      console.log(this.name)<br/>
    }<br/>
  }<br/>
}<br/>
</p>
<p>然后生成实例对象：</p>
<p>var p1 = createPerson('Jack', 18)<br/>
var p2 = createPerson('Mike', 18)
</p>
<p>这样封装确实爽多了，通过工厂模式我们解决了创建多个相似对象代码冗余的问题， 但却没有解决对象识别的问题（即怎样知道一个对象的类型）</p>
<h1>构造函数:更优雅的工厂函数</h1>
<p>使用了new关键字创建对象的函数，被叫做了构造函数</p>
<p>
function Person (name, age) {<br/>
  this.name = name<br/>
  this.age = age<br/>
  this.sayName = function () {<br/>
    console.log(this.name)<br/>
  }<br/>
}<br/>
<br/>
var p1 = new Person('Jack', 18)<br/>
p1.sayName() // => Jack<br/>

var p2 = new Person('Mike', 23)<br/>
p2.sayName() // => Mike<br/>
</p>
<h1>构造函数和工厂函数的区别</h1>
<p>在上面的示例中，Person() 函数取代了 createPerson() 函数，但是实现效果是一样的。 这是为什么呢？
我们注意到，Person() 中的代码与 createPerson() 有以下几点不同之处：</p>
<p>
没有显示的创建对象<br/>
直接将属性和方法赋给了 this 对象<br/>
没有 return 语句<br/>
函数名使用的是大写的 Person<br/>
</p>
<p>而要创建 Person 实例，则必须使用 new 操作符。 以这种方式调用构造函数会经历以下 4 个步骤：</p>
<p>
创建一个新对象<br/>
将构造函数的作用域赋给新对象（因此 this 就指向了这个新对象）<br/>
执行构造函数中的代码<br/>
返回新对象<br/>
</p>
<p>
当使用 new 操作符调用 Person() 的时候，实际上这里会先创建一个对象<br/>
var instance = {}<br/>
然后让内部的 this 指向 instance 对象<br/>
this = instance<br/>
接下来所有针对 this 的操作实际上操作的就是 instance<br/>
-----<br/>
在函数的结尾处会将 this 返回，也就是 instance<br/>
return this<br/>
</p>
<h1>构造函数和实例对象的关系</h1>
<p>使用构造函数的好处不仅仅在于代码的简洁性，更重要的是我们可以识别对象的具体类型了。 在每一个实例对象中同时有一个 constructor 属性，该属性指向创建该实例的构造函数：</p>      
<h1>总结</h1>
<p>
构造函数是根据具体的事物抽象出来的抽象模板<br/>
实例对象是根据抽象的构造函数模板得到的具体实例对象<br/>
每一个实例对象都具有一个 constructor 属性，指向创建该实例的构造函数<br/>
</p>
<h1>构造函数的问题</h1>
<p>那就是对于每一个实例对象，name 和 sayName 都是一模一样的内容， 每一次生成一个实例，都必须为重复的内容，多占用一些内存，如果实例对象很多，会造成极大的内存浪费。</p>
<p>我们可以把sayName这个方法提取到外面</p>
<h1>原型,更好的解决方案： prototype</h1>
<p>每一个构造函数都有一个 prototype 属性，指向另一个对象。 这个对象的所有属性和方法，都会被构造函数的所拥有。</p>
<p>也就是说,我们可以把所有对象实例需要共享的属性和方法直接定义在 prototype 对象上</p>
<p>
function Person (name, age) {<br/>
  this.name = name<br/>
  this.age = age<br/>
}<br/>
<br/>
console.log(Person.prototype)<br/>
<br/>
Person.prototype.type = 'human'<br/>
<br/>
Person.prototype.sayName = function () {<br/>
  console.log(this.name)<br/>
}<br/>
<br/>
var p1 = new Person(...)<br/>
var p2 = new Person(...)<br/>
<br/>
console.log(p1.sayName === p2.sayName) // => true<br/>
这时所有实例的 type 属性和 sayName() 方法， 其实都是同一个内存地址，指向 prototype 对象，因此就提高了运行效率。
</p>
<h1>构造函数、实例对象、原型三者之间的关系</h1>
<p>任何函数都具有一个 prototype 属性，该属性是一个对象</p>
<p>构造函数的 prototype 对象默认都有一个 constructor 属性，指向 prototype 对象所在函数</p>
<p>通过构造函数得到的实例对象内部会包含一个指向构造函数的 prototype 对象的指针 __proto__</p>
<p>所有实例对象都直接或间接继承了原型对象的成员</p>
<img src='http://180.76.244.163/admin/images/img_1.png' style="width: 100%;height: 100%;" />
<h1>总结</h1>
<p>对象：单个事物的抽象</p>
<p>面向对象：是一种封装提高代码效率和可维护性（封装继承多态）</p>
<p>对象：new object（）或者{}</p>
<p>构造函数：new关键字创建的对象</p>
<p>实例对象：在声明了一个函数之后，浏览器会自动按照一定的规则创建一个对象，这个对象就叫做原型对象。这个原型对象其实是储存在了内存当中</p>
<p>每一个实例对象都有constructor 指向它的构造函数</p>
<p>每一个构造函数都有prototype  指向另一个对象，这个对象和个方法都会被构造函数所拥有</p>
<p>通过构造函数得到的实例对象内部会包含一个指向构造函数的 prototype 对象的指针 __proto__
所有实例对象都直接或间接继承了原型对象的成员</p>

`
    },
    {
        name: "原型及原型链", context: `
    <h1>原型对象</h1>
    <p>原型对象:每一个函数类型的数据，都有一个叫做prototype的属性，这个属性指向的是一个对象，就是原型对象</p>
    <img src='http://180.76.244.163/admin/images/img_2.png' style="width: 100%;height: 100%;" />
    <p>对于原型对象来说，它有个constructor属性，指向它的构造函数</p>
     <img src='http://180.76.244.163/admin/images/img_3.png' style="width: 100%;height: 100%;" />
    <p>原型对象作用:主要用来存放实例对象的公有属性和公有方法</p>
    <h1>原型链</h1>
    <p>说原型链之前，先来了解两个概念</p>
    <p>显示原型</p>
    <p>显示原型:利用prototype属性查找原型，只是这个是函数类型数据的属性</p>
    <p>隐式原型</p>
    <p>隐式原型是利用__proto__属性查找原型，这个属性指向当前对象的构造函数的原型对象，这个属性是对象类型数据的属性，所以可以在实例对象上面使用：</p>
      <img src='http://180.76.244.163/admin/images/img_4.png' style="width: 100%;height: 100%;" />
    <h1>原型链</h1>
    <p>既然这个是对象类型的属性，而原型对象也是对象，那么原型对象就也有这个属性，但是原型对象的__proto__又是指向哪呢？
我们来分析一下，既然原型对象也是对象，那我们只要找到对象的构造函数就能知道__proto__的指向了。而js中，对象的构造函数就是Object()，所以对象的原型对象，就是Object.prototype。既然原型对象也是对象，那原型对象的原型对象，就也是Object.prototype。不过Object.prototype这个比较特殊，它没有上一层的原型对象，或者说是它的__proto__指向的是null
</p>
    <img src='http://180.76.244.163/admin/images/img_5.png' style="width: 100%;height: 100%;" />
    <p>
    到这里，就可以回答前面那个问题了，如果某个对象查找属性，自己和原型对象上都没有，那就会继续往原型对象的原型对象上去找，这个例子里就是Object.prototype，这里就是查找的终点站了，在这里找不到，就没有更上一层了（null里面啥也没有），直接返回undefined。
可以看出，整个查找过程都是顺着__proto__属性，一步一步往上查找，形成了像链条一样的结构，这个结构，就是原型链。所以，原型链也叫作隐式原型链。
正是因为这个原因，我们在创建对象、数组、函数等等数据的时候，都自带一些属性和方法，这些属性和方法是在它们的原型上面保存着，所以它们自创建起就可以直接使用那些属性和方法。
</p>
    <p>函数也是一种对象</p>
     <img src='http://180.76.244.163/admin/images/img_5.png' style="width: 100%;height: 100%;" />
    <p></p>
    `
    },
    {name: "继承（原型继承、构造函数继承、组合继承）", context: ''},
    {name: "new 关键字到底做了什么", context: ''},
    {name: "promise A+ 规范详解", context: ''},
    {name: "手写promise 函数", context: ''},
    {name: "重点注意 then 的链式调用和值的穿透", context: ''},
    {name: "经典Promise相关面试题解析", context: ''},
    {name: "CommonJS 模块化规范及发展", context: ''},
    {name: "AMD、CMD、systemJS 模块化规范介绍及使用", context: ''},
    {name: "模块打包工具工程化使用简介", context: ''},
    {name: "同步模式/异步模式的差异、使用、原理", context: ''},
    {name: "回调函数的执行原理", context: ''},
    {name: "详解浏览器事件捕获，冒泡及浏览器不同规范之间的区别", context: ''},
    {name: "绑定事件的运用，以及封装一个多浏览器兼容的绑定 事件函数", context: ''},
    {name: "ajax 及 fetch API 详解", context: ''},
    {name: "常见的浏览器请求/响应头/错误码解析", context: ''},
    {name: "垃圾回收", context: ''},
    {name: "内存管理", context: ''},
    {name: "复杂应用设计思路与原则", context: ''},
    {name: "js常见设计模式分类与应用", context: ''},
    {name: "常见设计模式面试题", context: ''},
    {name: "ts基础理论及原理", context: ''},
    {name: "type 和 interface的异同", context: ''},
    {name: "如何基于一个已有类型, 扩展出一个大部分内容相似, 但是有部分区别的类型?", context: ''},
    {name: "实现一个路由跳转通过ts约束参数的routeHelper", context: ''},
    {name: "实现一个基于ts和事件模式的countdown基础", context: ''},
    {name: "Scanner 扫描器", context: ''},
    {name: "Parser 解析器", context: ''},
    {name: "Binder 绑定器", context: ''},
    {name: "Checker 检查器", context: ''},
    {name: "Emitter 发射器", context: ''},
    {name: "ECMAScript 规范发展简介", context: ''},
    {name: "ES6 新增 API 解析 && ESNext 规范中的 API解析", context: ''},
    {name: "generator / async await 简介", context: ''},
    {name: "函数进阶（箭头函数、默认参数）", context: ''},
    {name: "模板字符串", context: ''},
    {name: "对象和数组的扩展用法", context: ''},
    {name: "Proxy、Reflect、Map、Set、Symbol", context: ''},
    {name: "for...of、迭代器模式、生成器函数", context: ''},
    {name: "对象与数组的解构、rest 操作符，解构与解构的原理", context: ''},
    {name: "手写实现一个函数模拟Object.entries", context: ''},
    {name: "写一个Promise.allSeettled, 需要返回所有promise的状态和结果", context: ''},
    {name: "强制缓存协商缓存", context: ''},
    {
        name: "数组方法", context: `
<p>push()，从后面添加元素，返回值为添加完元素后的数组长度</p>
<p>pop()，从后面删除元素，只能删除一个，返回值为删除的元素</p>
<p>shift()，从前面删除元素，只能删除一个，返回值为删除的元素</p>
<p>unshift()，从前面添加元素，返回值是添加完元素后的数组长度</p>
<p>splice(i, l)，删除从i开始的，长度为l的元素，返回值是删除的元素</p>
<p>concat()，连接两个数组，返回值为连接后的新数组</p>
<p>split()，将字符串转换为数组</p>
<p>sort()，将数组进行排序,返回值是排好的数组，默认是按照最左边的数字进行排序，不是按照数字大小排序的</p>
<p>reverse()，反转数组，返回值是反转后的数组</p>
<p>slice(start, end)，切去索引值start到end的数组，不包含end，返回值是切出来的数组</p>
<p>forEach()，遍历数组，没有返回值</p>
<p>map()，遍历数组，返回值为一个新数组</p>
<p>filter()，过滤数组，返回一个满足要求的数组</p>
    `
    },
    {name: "如何理解 HTML 语义化？", context: `
    <p>让人更容易读懂（增加代码可读性）</p>
    <p>让搜索引擎更容易读懂，有助于爬虫抓取更多的有效信息，爬虫依赖于标签来确定上下文和各个关键字的权重（SEO）。</p>
    <p>在没有 CSS 样式下，页面也能呈现出很好地内容结构、代码结构。</p>
    <p></p>
    `},
    {name: "script 标签中 defer 和 async 的区别？", context: `
    <p>script ：会阻碍 HTML 解析，只有下载好并执行完脚本才会继续解析 HTML</p>
    <p>async script ：解析 HTML 过程中进行脚本的异步下载，下载成功立马执行，有可能会阻断 HTML 的解析。</p>
    <p>defer script：完全不会阻碍 HTML 的解析，解析完成之后再按照顺序执行脚本。</p>
    `},
    {name: "TCP 三次握手 四次挥手", context: `
    <p>为什么需要三次握手，两次不行吗？其实这是由 TCP 的自身特点可靠传输决定的。客户端和服务端要进行可靠传输，那么就需要确认双方的接收和发送能力。第一次握手可以确认客服端的发送能力，第二次握手，确认了服务端的发送能力和接收能力，所以第三次握手才可以确认客户端的接收能力。不然容易出现丢包的现象
</p>
    <p>一次挥手：客户端打算关闭连接，此时会发送一个 TCP 首部 FIN 标志位被置为 1 的报文</p>
    <p>二次挥手：服务端收到该报文后，就向客户端发送 ACK 应答报文</p>
    <p>三次挥手：客户端收到服务端的 ACK 应答报文后，之后进入 FIN_WAIT_2 状态。等待服务端处理完数据后，也向客户端发送 FIN 报文，之后服务端进入 LAST_ACK 状态</p>
    <p>四次挥手：客户端收到服务端的 FIN 报文后，回一个 ACK 应答报文，之后进入 TIME_WAIT 状态
服务器收到了 ACK 应答报文后，就进入了 CLOSED 状态，至此服务端已经完成连接的关闭。
客户端在经过 2MSL 一段时间后，自动进入 CLOSED 状态，至此客户端也完成连接的关闭
</p>
    `},
 {name: "对 BFC 的理解", context: `
    <p>BFC 即块级格式上下文，根据盒模型可知，每个元素都被定义为一个矩形盒子，然而盒子的布局会受到尺寸，定位，盒子的子元素或兄弟元素，视口的尺寸等因素决定，所以这里有一个浏览器计算的过程，计算的规则就是由一个叫做视觉格式化模型的东西所定义的，BFC 就是来自这个概念，它是 CSS 视觉渲染的一部分，用于决定块级盒的布局及浮动相互影响范围的一个区域
</p>
<p>BFC 具有一些特性</p>
<p>1.块级元素会在垂直方向一个接一个的排列，和文档流的排列方式一致</p>
<p>2.在 BFC 中上下相邻的两个容器的 margin  会重叠，创建新的 BFC 可以避免外边距重叠</p>
<p>3.计算 BFC 的高度时，需要计算浮动元素的高度。</p>
<p>4.BFC 区域不会与浮动的容器发生重叠</p>
<p>5.BFC 是独立的容器，容器内部元素不会影响外部元素</p>
<p>6.每个元素的左 margin  值和容器的左 border  相接触</p>
<p>--利用这些特性，我们可以解决以下问题--</p>
<p>利用 4  和 6 ，我们可以实现三栏（或两栏）自适应布局</p>
<p>利用 2 ，我们可以避免 margin  重叠问题</p>
<p>利用 3 ，我们可以避免高度塌陷</p>
<p>创建 BFC 的方式：</p>
<p>绝对定位元素（position 为 absolute 或 fixed ）</p>
<p>行内块元素，即 display 为 inline-block 。</p>
<p>overflow 的值不为 visible </p>
    `},{name: "xxx", context: `
    <p></p>
    `},


]
